<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('提醒名称')" prop="name">
            <el-input v-model="form.name" :placeholder="$t('提醒名称')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('实现类')" prop="socureClassName">
            <el-input v-model="form.socureClassName" :placeholder="$t('实现类')" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="$t('提醒人')" prop="remindPersons">
            <!-- <el-input v-model="form.remindPerson" :placeholder="$t('提醒人')" show-word-limit maxlength="127" /> -->
            <UserSelect
              v-model="form.remindPersons"
              multiple
              :placeholder="$t('用户')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('提醒角色')" prop="remindRoles">
            <!-- <el-input v-model="form.remindRole" :placeholder="$t('提醒角色')" /> -->
            <el-select v-model="form.remindRoles" multiple placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              />
            </el-select></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('通知编码')" prop="remindCode">
            <el-input v-model="form.remindCode" :placeholder="$t('通知编码')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('提醒天数')" prop="remindDay">
            <el-input-number
              v-model="form.remindDay"
              type="number"
              controls-position="right"
              :min="1"
              :placeholder="$t('提醒天数')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="system:remind" />
    </div>
  </div>
</template>

<script>
import { saveSysRemind, getSysRemind, getAllRole } from '@/api/system/remind/sysRemind'
export default {
    data() {
        return {
            // 表单参数
            form: {},
            roleOptions: [],
            // 遮罩层
            loading: false,
            // 表单校验
            rules: {
              name: [
                 { required: true, message: '必填项', trigger: 'blur' }
               ],
                 socureClassName: [
                 { required: true, message: '必填项', trigger: 'blur' }
               ],
                remindCode: [
                 { required: true, message: '必填项', trigger: 'blur' }
               ],
                remindDay: [
                 { required: true, message: '必填项', trigger: 'blur' }
               ],
                remindPersons: [
                 { required: true, message: '必填项', trigger: 'blur' }
               ],
                remindRoles: [
                 { required: true, message: '必填项', trigger: 'blur' }
               ]

            }
        }
    },
    created() {
      this.getRole()
    },
    methods: {
        // 初始化数据
        init(data) {
            this.loading = true
            if (data != null && data.id !== undefined) {
                getSysRemind(data.id).then(response => {
                    this.form = response.data
                    this.loading = false
                })
            } else {
                this.reset()
                this.loading = false
            }
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                name: undefined,
                socureClassName: undefined,
                informTypeId: undefined,
                remindPerson: undefined,
                remindRole: undefined,
                remindDay: undefined
            }
            this.resetForm('form')
        },
        // 取消按钮
        cancel() {
            this.$parent.$parent.formOpen = false
            this.$parent.$parent.reset()
        },
        // 关闭form页面
        closeForm() {
            // 关闭form页面遮罩层
            this.loading = false
            // 关闭form页面
            if (this.$parent.$parent.formOpen !== undefined) {
              this.$parent.$parent.formOpen = false
            }
            // 刷新list页面
            if (this.$parent.$parent.getList !== undefined) {
              this.$parent.$parent.getList()
            }
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.loading = true
                    saveSysRemind(this.form).then(response => {
                        if (response.code === 200) {
                            this.msgSuccess(this.$t('保存成功'))
                            this.closeForm()
                        } else {
                            this.msgError(response.msg)
                        }
                        this.loading = false
                    })
                } else {
                    this.locationError(document)
                }
            })
        },
        getRole() {
            getAllRole().then(response => {
              this.roleOptions = response.data
            })
        }

    }

}
</script>
